"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/27
 */
import * as React from 'react'
import {commonProps, commonStyles} from "../../assets/styles/common";

const {View, FlatList} = require('react-native');
const {connect} = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const {Actions} = require("react-native-router-flux");
import Colors from "../../assets/styles/Colors";
import NavBackButton from "../../component/BackButton";
import {homeDynamicList, noticeList} from "../../assets/data";
import NoticeItem from "../../component/NoticeItem";
import Line from "../../component/Line";
import {NoticePage} from "../../interface/router";

class Page extends React.Component<NoticePage, any> {


    constructor(props: any, context: any) {
        super(props, context);
        this.state = {
            title: '正在加载...',
            refreshing: true,
        }
    }


    componentDidMount(): void {
        this.onRefresh();
    }

    onRefresh = () => {
        this.setState({
            refreshing: true,
            title: '正在加载...'
        });
        setTimeout(() => {
            this.setState({
                refreshing: false,
                title: '通知'
            })
        }, 1000);
    };

    onItemPress = (item:messageItem) => {
        this.props.dispatch({
            type: 'message/readMessage',
            payload: {...item}
        });
        Actions.chat({
            title:item.nickname,
            receiver: item.username
        })
    };

    renderItem = (props) => {
// onPress={Actions.postingsDetail.bind(null, {dynamicItem: homeDynamicList[0]})}
        const item: messageItem = props.item;
        return <NoticeItem item={item} onPress={this.onItemPress.bind(this, item)}/>
    };

    render() {
        return (
            <View style={[commonStyles.container, {backgroundColor: Colors.White}]}>
                <NavigationBar {...commonProps.navBar}
                               leftButton={<NavBackButton/>}
                               title={{title: this.state.title, tintColor: Colors.White}}
                />
                <FlatList data={this.props.message.list}
                          extraData={this.state}
                          refreshing={this.props.message.loading}
                          onRefresh={this.onRefresh}
                          renderItem={this.renderItem}
                          ItemSeparatorComponent={() => <Line height={0.5}/>}
                          keyExtractor={(item, index) => index}/>

            </View>
        );
    }
}


export default connect(
    ({message}) => ({message})
)(Page);